<template>
	<view class="route-make-nav flex--col">
		<view class="nav-make-progress flex--row">
			<view class="step full"></view>
			<view class="step" v-for="(_,index) in progressDesc" :aria-label="'第'+index+1+'步 不可点击'">
				<image src="@/static/setp2.svg" class="progress" :class="{'active': index <= curProgress}"  ></image>
				<image src="@/static/setp.svg" class="progress" :class="{'active': index > curProgress}" ></image>
			</view>
		</view>
		<view class="nav-content flex--row	">
			<view class="nav-describe flex--col">
				<text class="text--secondary-dark">{{navDesc}}</text>
				<text class="text--thirday-grey">你可以返回上一页重新选择而不丢失你的选择记录。</text>
			</view>
			<view class="nav-button flex--row">
				<image src="@/static/chux/circle_arrow.svg" class="icon" @click="$emit('navBack')" role="button" aria-label="上一步"></image>
				<image src="@/static/chux/circle_arrow.svg" class="icon reverse" :class="{'inactive':curProgress >= 2}" @click="$emit('navForward')" role="button" aria-label="上一步"></image>
			</view>
		</view>
		
	</view>
</template>


<script>
	
	export default{
		props:['curProgress'],
		emits:['navBack','navForward'],
		data(){
			return {
				progressDesc:["为您推荐以下景点。","计算每个景点的游玩耗时。","最后一步！"]
			}
		},
		computed:{
			navDesc(){
				return this.progressDesc[this.curProgress]
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.text--secondary-dark{
		font-size: 22px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirday-grey{
		font-size: 14px;
		font-weight: 600;
		color:#383838;
	}
	
	.route-make-nav{
		box-sizing: border-box;
		padding:4px;
		justify-content: space-between;
		gap:24px;
	}
	
	.nav-make-progress{
		.step{
			&.full{
				@include border-three-roundings;
				background:#E8590C;
			}
			
			flex:1;
			height:28px;
			box-sizing: border-box;
			
			
			& image{
				width:100%;
				height: 100%;
			}
		}
		
		.progress{
			display: none;
			
			&.active{
				display:block;
			}
		}
	}

	.nav-content{
		gap:8px;
		align-items: center;
		.nav-describe{
			gap:6px;
		}
		
		
		.nav-button{
			gap:8px;
			& .reverse{
				transform:rotate(180deg);
			}
			
			& .inactive{
				display: none;
			}
		}
	}
	
</style>